<script setup lang="ts">
import test from "@/components/test.vue";
import test1 from "@/components/test1.vue";
import User from "@/service/user";
import { clearAllPending, clearAssignPending } from "@/service/utils/";
import { useUserStore } from "@/stores/user";
import { ref } from "vue";
const testRef = ref();
const userStore = useUserStore();
const testData = ref({
    test1: "a",
    test2: "b",
    test3: "c",
});
const login1 = async () => {
    const [res] = await User.login1(userStore.username, userStore.password);
    console.log(res, "login1");
};
const login2 = async () => {
    const [res] = await User.login2(userStore.username, userStore.password);
    console.log(res, "login2");
};
const changeMessage = () => {
    testRef.value.changeMessage();
};
const text1 = ref("emit");
const text2 = ref("v-model");
const text3 = ref("v-model");
const emitChange = (val) => {
    text1.value = val;
};
</script>

<template>
    <test ref="testRef" :text1="text1" v-model="text2" @emitChange="emitChange" />
    <test1 v-model="text3"><template #test>具名插槽</template></test1>
    <div class="frame">
        <button @click="changeMessage">Change message</button>
        <button @click="login1">测试接口1</button>
        <button @click="login2">测试接口2</button>
        <button @click="clearAllPending">接口停止请求</button>
        <button @click="clearAssignPending('login/cellphone/', 'post')">
            指定接口停止请求
        </button>
        <button v-track:click.data="testData">埋点测试</button>
    </div>
    <div style="border: 1px solid black; width: 200px; height: 200px">
        <div v-draggable class="draggable-element">Me</div>
        <div v-draggable class="draggable-element1">Your</div>
    </div>
</template>

<style scoped>
.draggable-element {
    width: 50px;
    height: 50px;
    background-color: #3498db;
    color: #fff;
    text-align: center;
    line-height: 50px;
}
.draggable-element1 {
    bottom: 0;
    right: 0;
    width: 50px;
    height: 50px;
    background-color: red;
    color: #fff;
    text-align: center;
    line-height: 50px;
}
.frame {
    display: flex;
}
</style>
